<template>
  <div>
    <ul class="mui-table-view">
		<li class="mui-table-view-cell mui-media" v-for="(item, index) in newList" :key="index">
			<router-link :to="'/home/newsInfo/' + item.id">
            <!-- <router-link :to="'/home/newsInfo?id=' + item.id"> -->
				<img class="mui-media-object mui-pull-left" :src="item.img_url">
				<div class="mui-media-body">
					<h2>{{ item.title }}</h2>		
					<p class="mui-ellipsis">
                        <span>发表时间：{{ item.add_time | dateStrFormat }}</span>
                        <span>点击：{{ item.click }}次</span>
                    </p>
				</div>
			</router-link>
		</li>
	</ul>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
  data(){
      return {
          newList:[]
      }
  },
  created(){
      this.getNewListData()
  },
  methods:{
      getNewListData(){
          this.$http.get('api/getnewslist').then(result => {
              if(result.body.status === 0) {
                  this.newList = result.body.message;
              } else {
                  Toast('获取新闻列表失败');
              }
          })
      }
  }
}
</script>

<style lang="less" scoped>
    .mui-media-body {
        h2 {
            font-size: 14px;
            color: yellowgreen;
        }
        .mui-ellipsis {
            font-size: 12px;
            color: hotpink;
            display: flex;
            justify-content: space-between;
        }
    }
</style>



